<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
	</head>

	<body>

		<div id="map" class="row-fluid span12">
			
		</div>
		<div id="location" style="z-index: 3;"

		</div>

	</body>
	<script type="text/javascript">
		var map = new ol.Map({
			view: new ol.View({
				center: [117.217,39.13],//必需
				projection: "EPSG:4326",//必需
				zoom: 15
			}),
			layers: [
				//地图图层
				new ol.layer.Tile({
					source: new ol.source.XYZ({
						projection: "EPSG:4326",
						url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"
					})
				}),
				//文字图层
				new ol.layer.Tile({
					source: new ol.source.XYZ({
						projection: "EPSG:4326",
						url: "http://t7.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}"
					})
				})
			],
			target: 'map'
		});
		var mousePositionControl = new ol.control.MousePosition({
			target: "location",
			coordinateFormat: ol.coordinate.createStringXY(5), //保留5位小数  
			undefinedHTML: ''
		});
		map.addControl(mousePositionControl);
	</script>

</html>